import React, {useCallback, useReducer, useState} from 'react';

import './index.css'

function TodoItem(props) {
    const {todo,dispatch} = props
    const [flag,dispatch2] = useReducer(function (preState,{type,payload}) {
            if(type==='CHANGE_FLAG'){
                return payload
            }
    },false)
    return (
        <li onMouseEnter={()=>dispatch2({type:'CHANGE_FLAG',payload:true})} onMouseLeave={()=>dispatch2({type:'CHANGE_FLAG',payload:false})}>
            <label>
                <input type="checkbox" checked={todo.isRequired} onChange={()=>dispatch({type:'CHECKED',payload:todo.id})}/>
                <span>{todo.name}</span>
            </label>
            <button className="btn btn-danger" style={{display:flag? 'block':'none'}} onClick={()=>dispatch({type:'DELETE',payload:todo.id})}>删除</button>
        </li>
    );
}

export default TodoItem;